<template>
<div style="height: 6vh;background-color: #fff;padding: 10px 20px">
  <span style="line-height: 60px;font-size: 20px">围栏展示</span>
  <el-button @click="router.push('/geofence')" type="primary" style="float:right; margin-top:13px">返回</el-button>
</div>
  <!-- 第6步：创建地图容器元素-->
  <div style="width: 100%; height:84vh;" id="mapContainer"></div>

</template>


<script setup>
import router from "@/router";
import {nextTick, onMounted, ref} from "vue";
import {DrawScene, DrawControl,OperateEventType} from 'bmap-draw';
import {ElMessage} from "element-plus";
import qs from "qs";
import axios from "axios";

//定义电子围栏对象
const geofence =ref({
  name:'',      //围栏名称
  position:{}   //围栏信息
})

//声明全局的地图变量
var map;
onMounted(()=>{
  //nextTick()表示在DOM更新之后执行,确保地图能在div创建后渲染
  nextTick(()=>{
    map=new BMapGL.Map("mapContainer");
    showGeofence();
  })
})

const geofenceId = new URLSearchParams(window.location.search).get('id');

const showGeofence=()=>{
  axios.get(BASE_URL+'/v1/geofence/select?id='+geofenceId).then((response)=>{
    if (response.data.code === 2000){
      //加载地图数据坐标点
      let data =JSON.parse(response.data.data[0].position);
      //定义一个遮盖物
      let overlayShow;
      //判断是圆形还是矩形
      if (data.type === 'circle'){
        //创建圆形,传入之前保存中心点坐标和半径,并且设置边的颜色,宽度,透明度
        overlayShow = new  BMapGL.Circle(new BMapGL.Point(data.longitude,data.latitude),data.radius,{strikeColor: "green",strokeWeight: 2,strokeOpacity: 1});
        let point = new BMapGL.Point(data.longitude,data.latitude);
        //初始化地图,设置中心点和地图级别
        //中心点设置为圆形的圆心
        map.centerAndZoom(point,15)
        map.addOverlay(overlayShow);
      }else{
        let points = data.recPoints.split(',');
        let vertexes =[];
        //循环遍历,将字符串转化为坐标点
        for (let i=0;i<points.length;i++){
          if (i===0){
            //设置中心为一个顶点
            let point = new BMapGL.Point(points[i].split('-')[0],points[i].split('-')[1]);
            //初始化地图,设置中心点和地图级别
            map.centerAndZoom(point,15);
          }
          vertexes.push(new BMapGL.Point(points[i].split('-')[0],points[i].split('-')[1]));
        }
        //创建多边形,传入之前保存的中心点坐标和半径,并且设置边的颜色宽度和透明度
        overlayShow = new BMapGL.Polygon(vertexes,{strokeColor:"green",strokeWeight:2,strokeOpacity:1})
      }

      map.addOverlay(overlayShow)
    }
  })
}

</script>

<style scoped>

</style>